<template>
  <el-main>
    <el-row>
      <template>
        <Vue3Lottie :animationData="LoadingJSON" :height="1000" :width="1000" />
      </template>
      <br />
      <br />
      <br />
      <br />
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-card class="box-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>公司公告</span>
              <el-button class="button" link type="primary" @click="changeDirection('top')">
                <span :style="{ color: classOption.direction === 'top' ? 'red' : '' }">向上滚动</span>
              </el-button>
              <el-button class="button" link type="primary" @click="changeDirection('bottom')">
                <span
                  :style="{
                    color: classOption.direction === 'bottom' ? 'red' : ''
                  }"
                >
                  向下滚动
                </span>
              </el-button>
              <el-button class="button" link type="primary" @click="changeDirection('left')">
                <span :style="{ color: classOption.direction === 'left' ? 'red' : '' }">向左滚动</span>
              </el-button>
              <el-button class="button" link type="primary" @click="changeDirection('right')">
                <span :style="{ color: classOption.direction === 'right' ? 'red' : '' }">向右滚动</span>
              </el-button>
            </div>
          </template>
          <SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="item.title"></span>
              </li>
            </ul>
          </SeamlessScroll>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script lang="ts" setup>
import { ref, reactive, unref } from 'vue'
import SeamlessScroll from '@/components/SeamlessScroll/index.vue'
import LoadingJSON from '@/assets/lottie/loading.json'

defineOptions({
  name: 'SeamlessScroll'
})

const scroll = ref()

const listData = ref([
  {
    title: '1、关于本月财务报告：全体员工请注意，将于周五上午9点在会议室进行月度财务分析会，请准时参加'
  },
  {
    title: '2、系统升级通知：为提升服务体验，我司将在今晚22:00至次日6:00进行系统维护，期间部分功能将暂时不可用'
  },
  {
    title: '3、内部培训课程安排：本周三下午14:00开始进行新产品知识培训，务必提前签到并做好课前预习'
  },
  {
    title: '4、员工福利调整：即日起，公司食堂增加晚餐供应，并增设健康餐选项，敬请享用'
  },
  {
    title: '5、重要人事变动：热烈祝贺张经理晋升为部门总监，新的领导团队成员名单已发至内网公告栏'
  },
  {
    title: '6、办公环境优化：办公区绿化改造工程启动，施工期间请避免在相关区域停留，确保安全'
  },
  {
    title: '7、节假日工作安排：鉴于五一假期临近，公司将采取轮休制度，请各部门负责人制定并提交值班计划'
  },
  {
    title: '8、安全生产检查：下周起，安全部门将对所有办公及生产场所进行全面的安全大检查，请各处配合自查整改'
  },
  {
    title: '9、社区公益活动报名：我司与社区合作开展环保公益行动，欢迎员工自愿参与，报名截止日期为本月25日'
  }
])

const classOption = reactive({ direction: 'top' })

function changeDirection(val: string) {
  ;(unref(scroll) as any).reset()
  unref(classOption).direction = val
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    margin-right: 20px;
  }
}

.warp {
  height: 270px;
  margin: 0 auto;
  overflow: hidden;

  ul {
    padding: 0 20px;
    margin: 0 auto;
    list-style: none;

    li,
    span {
      display: flex;
      justify-content: space-between;
      height: 30px;
      font-size: 15px;
      line-height: 30px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
